<template>
    <view class="container">
        <view class="bg-pic">
            <image :src="imagePath + '/app4/haibao-bg.jpg'"></image>
        </view>

        <view class="header">
            <image :src="imagePath + '/images/icon2.png'" />
        </view>

        <view class="mid">
            <image :src="imagePath + '/app4/haibao.png'" />
        </view>

        <view class="footer">
            <image :src="imagePath + '/images/icon4.png'" />
        </view>

        <view class="right-tips">
            <view @tap="save" class="navigator"><image :src="imagePath + '/images/haibao-bnt1.png'" /></view>
            <navigator open-type="redirect" url="/pages/status/index" class="navigator"><image :src="imagePath + '/images/haibao-bnt2.png'" /></navigator>
            <navigator open-type="redirect" url="/pages/app4/index" class="navigator"><image :src="imagePath + '/images/haibao-bnt3.png'" /></navigator>
        </view>
    </view>
</template>

<script>
var app = getApp();
import service from '../../service/service';
import { haibaoadd } from '../../service/api';
var app_type = 'app4';
export default {
    data() {
        return {
            imagePath: app.globalData.imagePath,
            imgUrl: app.globalData.imagePath + '/app4/haibao.jpg'
        };
    },
    onLoad: function (options) {
        this.haibaoadd();
    },
    onReady: function () {},
    methods: {
        haibaoadd: function (e) {
            var that = this;
            service({
                ...haibaoadd,
                data: {
                    type: app_type
                }
            })
                .then((response) => {})
                .catch((error) => {});
        },

        save() {
            let that = this;
            //若二维码未加载完毕，加个动画提高用户体验
            uni.showToast({
                icon: 'loading',
                title: '正在保存图片',
                duration: 1000
            });
            //判断用户是否授权"保存到相册"
            uni.getSetting({
                success(res) {
                    //没有权限，发起授权
                    if (!res.authSetting['scope.writePhotosAlbum']) {
                        uni.authorize({
                            scope: 'scope.writePhotosAlbum',
                            success() {
                                that.savePhoto();
                            },
                            fail() {
                                //用户点击拒绝授权，跳转到设置页，引导用户授权
                                uni.openSetting({
                                    success() {
                                        uni.authorize({
                                            scope: 'scope.writePhotosAlbum',
                                            success() {
                                                that.savePhoto();
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    } else {
                        that.savePhoto();
                    }
                }
            });
        },

        savePhoto() {
            let that = this;
            uni.downloadFile({
                url: that.imgUrl,
                success: function (res) {
                    uni.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success(res) {
                            uni.showToast({
                                title: '保存成功',
                                icon: 'success',
                                duration: 1000
                            });
                        }
                    });
                }
            });
        }
    }
};
</script>
<style>
.container {
    width: 100%;
    height: 100vh;
    padding: 50rpx 60rpx 100rpx;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

.bg-pic {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.bg-pic > image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header {
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: right;
}
.header > image {
    width: 145rpx;
    height: 98rpx;
}

.mid {
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: center;
}
.mid > image {
    width: 345rpx;
    height: 683rpx;
}

.footer {
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: center;
}
.footer image {
    width: 146rpx;
    height: 109rpx;
}

.right-tips {
    position: absolute;
    width: 50rpx;
    bottom: 100rpx;
    right: 15rpx;
}
.right-tips .navigator {
    width: 50rpx;
}
.right-tips .navigator image {
    width: 50rpx;
    height: 206rpx;
}
.right-tips .navigator + .navigator {
    margin-top: 20rpx;
}
</style>
